<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <meta name="author" content="Robert Yao - yaohaixiao.com">
    <meta name="keyword" content="AutocJS,jQuery,jQuery Plugin">
    <meta name="description" content="AutocJS: Automatically create directory navigation for your article.">
    <!-- Mobile Specific Meta -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>Examples - AutocJS</title>
    <link href="../asset/normalize/normalize.css" type="text/css" rel="stylesheet" media="all">
    <link href="../css/api.css" type="text/css" rel="stylesheet">
    <link href="../css/autoc.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="api-header">
    <h1 class="api-project">AutocJS</h1>
    <ul class="api-navigation">
        <li><a href="../index.htm">Home</a></li>
        <li><a href="../api/index.htm">API Documentation</a></li>
        <li class="api-active"><a href="index.htm">Examples</a></li>
        <li><a href="https://github.com/yaohaixiao/AutocJS/archive/master.zip">Download</a></li>
    </ul>
</div>
<div class="api-wrap" id="examples">
    <h1 class="api-subject">Examples</h1>
    <div class="api-container" id="container">
        <div class="api-content selector" id="selector">
            <h2>Customize selector</h2>
            <div class="api-item">
<pre class="api-code"><code>new AutocJS({
    article: '#container',
    // 只收集文章中的 h2　标题标签
    selector: 'h2'
});</code></pre>
            </div>
            <p>演示地址：<a href="customize-selector.htm">customize-selector.htm</a></p>
        </div>
        <div class="api-content title" id="title">
            <h2>Customize title</h2>
            <div class="api-item">
<pre class="api-code"><code>new AutocJS({
    article: '#container',
    title: 'Customize Title'
});</code></pre>
            </div>
            <p>演示地址：<a href="customize-title.htm">customize-title.htm</a></p>
        </div>
        <div class="api-content chapters" id="chapters">
            <h2>Customize chapters</h2>
            <div class="api-item">
<pre class="api-code"><code>var AutocNAV = new AutocJS({
    article: '#container'
});
var headings = [
    $( '&lt;h1 rel="http://www.baidu.com/"&gt;Robert&lt;/h1&gt;' ),
    $( '&lt;h2 rel="http://www.yahoo.com/"&gt;First Name&lt;/h2&gt;' ),
    $( '&lt;h2 rel="http://www.oschina.net/"&gt;Last Name&lt;/h2&gt;' ),
    $( '&lt;h1 rel="http://www.yaohaixiao.com/"&gt;Gender&lt;/h1&gt;' ),
    $( '&lt;h2 rel="http://www.nodejs.org/"&gt;Male&lt;/h2&gt;' ),
    $( '&lt;h2 rel="http://www.npmjs.com/"&gt;Female&lt;/h2&gt;' )
];
AutocNAV.chapters(headings, false);</code></pre>
            </div>
            <p>演示地址：<a href="customize-chapters.htm">customize-chapters.htm</a></p>
        </div>
        <div class="api-content isAnchorsOnly" id="isAnchorsOnly">
            <h2>Create anchors only</h2>
            <div class="api-item">
<pre class="api-code"><code>new AutocJS({
    article: '#container',
    isAnchorsOnly: true
});</code></pre>
            </div>
            <p>演示地址：<a href="create-anchors-only.htm">create-anchors-only.htm</a></p>
        </div>
        <div class="api-content isAnimateScroll" id="isAnimateScroll">
            <h2>Positioning behavior</h2>
            <div class="api-item">
<pre class="api-code"><code>new AutocJS({
    article: '#container',
    // 不配置 isAnimateScroll 或者设置为 true 则是默认的动画滚动定位
    isAnimateScroll: false
});</code></pre>
            </div>
            <p>演示地址：<a href="positioning-behavior.htm">positioning-behavior.htm</a></p>
        </div>
        <div class="api-content hasDirectoryInArticle" id="hasDirectoryInArticle">
            <h2>Create directory navigation in the article</h2>
            <div class="api-item">
<pre class="api-code"><code>new AutocJS({
    article: '#container',
    // 不配置 hasDirectoryInArticle 或者设置为 false，则不会在文章开始位置显示目录导航
    hasDirectoryInArticle: true,
    // 通常这个时候就不需要侧边栏的导航菜单了，当然你也可以两个都要（isAnchorsOnly: false 即可）。
    onlyAnchors: true
});</code></pre>
            </div>
            <p>演示地址：<a href="create-directory-navigation-in-the-article.htm">create-directory-navigation-in-the-article.htm</a>
            </p>
        </div>
        <div class="api-content hasChapterCodeAtHeadings" id="hasChapterCodeAtHeadings">
            <h2>Has chapter code at the headings</h2>
            <div class="api-item">
<pre class="api-code"><code>new AutocJS({
    article: '#container',
    // 不配置 hasChapterCodeAtHeadings 或者设置为 false，则不会在文章中的标题上显示段落章节索引编码
    hasChapterCodeAtHeadings: true
});</code></pre>
            </div>
            <p>演示地址：<a href="has-chapter-code-at-the-headings.htm">has-chapter-code-at-the-headings.htm</a></p>
        </div>
        <div class="api-content hasChapterCodeInDirectory" id="hasChapterCodeInDirectory">
            <h2>Has chapter code in the directory</h2>
            <div class="api-item">
<pre class="api-code"><code>new AutocJS({
    article: '#container',
    // 不配置 hasChapterCodeInDirectory 设置为 false，则不会在导航菜单中显示段落索引编号
    hasChapterCodeInDirectory: false
});</code></pre>
            </div>
            <p>演示地址：<a href="has-chapter-code-in-the-directory.htm">has-chapter-code-in-the-directory.htm</a></p>
        </div>
    </div>
</div>
<div class="api-footer">
    <p class="api-author"><span class="api-version">AutocJS</span> · Created by <a href="http://www.yaohaixiao.com/">Robert
        Yao</a></p>
    <p class="license">Code licensed under <a href="http://opensource.org/licenses/mit-license.html">MIT License</a> ·
        Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a></p>
    <p class="issues"><a href="https://github.com/yaohaixiao/AutocJS">GitHub Project</a> ·
        <a href="https://github.com/yaohaixiao/AutocJS/issues">Issues</a></p>
</div>
<script type="text/javascript" src="../asset/jquery/jquery.js"></script>
<script type="text/javascript" src="../js/autoc.js"></script>
<script type="text/javascript">
    var ArticleTOC = $( '#container' ).autoc( {
        title: 'Examples'
    } );

    var headings = [
        $( '<h1 rel="http://www.baidu.com/">Robert</h1>' ),
        $( '<h2 rel="http://www.yahoo.com/">First Name</h2>' ),
        $( '<h2 rel="http://www.oschina.net/">Last Name</h2>' ),
        $( '<h1 rel="http://www.yaohaixiao.com/">Gender</h1>' ),
        $( '<h2 rel="http://www.nodejs.org/">Male</h2>' ),
        $( '<h2 rel="http://www.npmjs.com/">Female</h2>' )
    ];

    ArticleTOC.chapters( headings , false);
</script>
</body>
</html>